<template>
  <div>
    <div class="ibox-content no-border">
      <div>{{$route.query.role}}角色权限设置</div>
    </div>
    <div class="ibox-content">
      <el-button size="small" type="primary" plain icon="el-icon-folder" @click.native="addRole('addForm')">添加
      </el-button>
      <el-button @click="goBack" size="small" type="primary" plain icon="el-icon-back">返回列表</el-button>
    </div>
    <div class="ibox-content ">
      <el-card shadow="never" style="margin-bottom: 20px" v-for="(item,index) in AllPermissionList" :key="index">
        <div slot="header" class="clearfix">
          <el-checkbox :indeterminate="item.isIndeterminate" v-model="item.checkAll"
                       @click.native="checkAllClick(index)">{{item.ControllerName}}
          </el-checkbox>
        </div>
        <div class="ibox-content no-border">
          <el-checkbox-group v-model="item.checklist" @click.native="checkedGroupClick(index)"
                             @change="handleCheckedListChange">
            <el-checkbox :label="item2.ActionID"
                         :key="item2.ActionID"
                         style="width: 180px;padding:5px 0"
                         v-for="(item2,index2) in item.ActionList">{{item2.ActionName}}
            </el-checkbox>
          </el-checkbox-group>
        </div>
      </el-card>
    </div>

    <div class="ibox-content">
      <el-button size="small" type="primary" plain icon="el-icon-folder" @click.native="addRole('addForm')">添加
      </el-button>
      <el-button @click="goBack" size="small" type="primary" plain icon="el-icon-back">返回列表</el-button>
    </div>
  </div>
</template>

<script>
  import {getRolePermission, saveRolePermission} from "../../api/permission";

  export default {
    name: "PermissionSetting",
    data() {
      return {
        checkedList: [],
        AllPermissionList: [],
      }
    },
    watch: {},
    created() {
      this.getPageRolePermission();
    },
    computed: {
      getCheckResult() {
        let data = {
          parent: this.$route.query.role,
          child: []
        };

        this.AllPermissionList.forEach((item) => {
          if (item.checklist.length > 0) {
            item.checklist.forEach(item2 => {
              data.child.push(item2)
            })
          }
        })

        return data

        // let result = [];
        // this.AllPermissionList.forEach((item) => {
        //   if (item.checklist.length > 0) {
        //     let listData = {};
        //     listData.parent = item.ControllerName;
        //     listData.child = item.checklist;
        //     result.push(listData)
        //   }
        // });
        // return result;
      }
    },
    methods: {
      checkAllClick(index) {
        setTimeout(() => {
          if (this.AllPermissionList[index].checkAll) {
            this.AllPermissionList[index].checklist = [];
            this.AllPermissionList[index].ActionList.forEach((item, index2) => {
              this.AllPermissionList[index].checklist.push(item.ActionID)
            })
          } else {
            this.AllPermissionList[index].checklist = [];
          }
          if (this.AllPermissionList[index].checklist > 0 && this.AllPermissionList[index].checklist < this.AllPermissionList[index].ActionList.length) {
            this.$set(this.AllPermissionList[index], 'isIndeterminate', true)
          } else {
            this.$set(this.AllPermissionList[index], 'isIndeterminate', false)
          }
        }, 50)

      },
      handleCheckedListChange(val) {
        this.checkedList = val;
      },
      checkedGroupClick(index) {
        setTimeout(() => {
          if (this.checkedList.length == this.AllPermissionList[index].ActionList.length) {
            this.AllPermissionList[index].checkAll = true;
          } else {
            this.AllPermissionList[index].checkAll = false;
          }
          if (this.checkedList.length > 0 && this.checkedList.length < this.AllPermissionList[index].ActionList.length) {
            this.$set(this.AllPermissionList[index], 'isIndeterminate', true)
          } else {
            this.$set(this.AllPermissionList[index], 'isIndeterminate', false)
          }
        }, 50)
      },

      getPageRolePermission() {
        getRolePermission({
          id: this.$route.query.role
        }).then(res => {
          res.data.forEach((item) => {
            item.checklist = [];
            item.ActionList.forEach((item2) => {
              if (item2.checked) {
                item.checklist.push(item2.ActionID)
              }
            })
            if (item.checklist.length == item.ActionList.length) {
              item.checkAll = true
            } else {
              item.checkAll = false
            }
            item.isIndeterminate = item.checklist.length > 0 && item.checklist.length < item.ActionList.length
          });
          this.AllPermissionList = res.data;
        }).catch(error => {

        })
      },
      goBack() {
        this.$router.push({name: 'Role'})
      },
      addRole() {
        // console.log(this.getCheckResult)
        saveRolePermission({
          AuthItemChild: this.getCheckResult
        }).then(res => {
          this.$message.success(res.msg);
          this.initData();
        }).catch(error => {

        })

      }
    }
  }
</script>

<style lang="scss">
  .el-card__header {
    background-color: #f5f5f5;
  }
</style>
